<template>
  <div class="page-container">
    <div class="canvas-container">
      <div class="button-content">
        <div class="canvas-button" @click="repeal">
          <svg-icon class="button-icon" icon="repeal" />
        </div>
        <div class="canvas-button" @click="recover">
          <svg-icon class="button-icon" icon="response-fill" />
        </div>
        <div class="canvas-button" @click="move">
          <svg-icon class="button-icon" icon="move-fill" />
        </div>
        <div class="canvas-button">
          <svg-icon class="button-icon" icon="pen" />
        </div>
        <div class="canvas-button">
          <svg-icon class="button-icon" icon="eliminate" />
        </div>
      </div>
      <div class="canvas-content">
        <canvas id="canvas"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
import DrawCanvas from "@/utils/draw.js";
export default {
  data() {
    return {
      canvasConfig: {
        width: 0,
        height: 0,
      },
      draw: null,
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //     this.initData();
    // });
    this.draw = new DrawCanvas({
      strokeStyle: "#409eff",
      lineWidth: 4,
    });
    this.draw.init("canvas");
    this.draw.drawCircle(100, 100, 10);
    this.draw.drawCircleArea(100, 200, 60);
  },
  methods: {
    repeal() {
      this.draw.revocation();
    },
    recover() {
      this.draw.recover();
    },
    move() {
      this.draw.move();
    },
    // initData() {
    //   var canvas = document.getElementById("canvas");
    //   var ctx = canvas.getContext("2d");
    //   var drageStatus = {
    //     IDLE: 0,
    //     START: 1,
    //     DRAGING: 2,
    //   };
    //   var drawType = "drawCircle"; // 绘制类型
    //   var mouseStart = null;
    //   var mouseLast = {
    //     x: 0,
    //     y: 0,
    //   };
    //   var element = [];
    //   const drageConfig = {
    //     status: 0,
    //     dragTarget: null,
    //     lastPosition: null,
    //   };

    //   canvas.addEventListener("mousedown", (e) => {
    //     const canvasPostion = getMousedownOffet(e);
    //     mouseStart = getMousedownOffet(e);
    //     const isAboveRef = aboveIn(canvasPostion);
    //     console.log(isAboveRef);
    //     if (isAboveRef) {
    //       drageConfig.dragTarget = isAboveRef;
    //       drageConfig.status = drageStatus.START;
    //       drageConfig.lastPosition = canvasPostion;
    //     }
    //   });

    //   canvas.addEventListener("mousemove", (e) => {
    //     const canvasPostion = getMousedownOffet(e);
    //     mouseLast = getMousedownOffet(e);
    //     if (
    //       (mouseStart && Math.abs(mouseStart.x - mouseLast.x) > 2) ||
    //       Math.abs(mouseStart.y - mouseLast.y) > 2
    //     ) {
    //       // 绘制图形
    //       if (drawType === "drawCircle") {
    //         const axisx = Math.abs(mouseStart.x - mouseLast.x);
    //         const axisy = Math.abs(mouseStart.y - mouseLast.y);
    //         const r = Math.abs(mouseStart.y - mouseLast.y);
    //         ctx.clearRect(0, 0, canvas.width, canvas.height);
    //         drawHistory();
    //         drawCircle(mouseStart.x, mouseStart.y, r);
    //       }
    //       console.log(mouseStart, mouseLast);
    //     }

    //     if (
    //       drageConfig.status === drageStatus.START &&
    //       getDistance(canvasPostion, drageConfig.lastPosition) > 4
    //     ) {
    //       drageConfig.status = drageStatus.DRAGING;
    //       console.log("try to drag");
    //     } else if (drageConfig.status === drageStatus.DRAGING) {
    //       console.log("dragging");
    //       const { dragTarget } = drageConfig;
    //       dragTarget.x = canvasPostion.x;
    //       dragTarget.y = canvasPostion.y;
    //       ctx.clearRect(0, 0, canvas.width, canvas.height);
    //       drawHistory();
    //     }
    //   });

    //   function drawHistory() {
    //     element.forEach((item) => {
    //       if (item.type === "circle") {
    //         drawCircle(item.x, item.y, item.r);
    //       } else if (item.type === "arc") {
    //         drawCircleArc(item.x, item.y, item.r);
    //       }
    //     });
    //   }

    //   canvas.addEventListener("mouseup", (e) => {
    //     drageConfig.status = drageStatus.IDLE;
    //     const r = Math.abs(mouseStart.y - mouseLast.y);
    //     element.push({
    //       x: mouseStart.x,
    //       y: mouseStart.y,
    //       r: r,
    //       type: "circle",
    //     });
    //     mouseStart = null;
    //   });
    //   canvas.addEventListener("mouseleave");

    //   drawCircle(0, 0, 20);
    //   element.push({
    //     x: 0,
    //     y: 0,
    //     r: 20,
    //     type: "circle",
    //   });
    //   drawCircle(200, 100, 20);
    //   element.push({
    //     x: 200,
    //     y: 100,
    //     r: 20,
    //     type: "circle",
    //   });
    //   drawCircleArc(300, 100, 20);
    //   element.push({
    //     x: 300,
    //     y: 100,
    //     r: 20,
    //     type: "arc",
    //   });
    //   //开始绘制圆线
    //   function drawCircle(x, y, r) {
    //     ctx.save();
    //     ctx.beginPath();
    //     ctx.lineWidth = 4; // 设置线的宽度
    //     ctx.strokeStyle = "#409eff";
    //     ctx.arc(x + r, y + r, r, 0, 2 * Math.PI);
    //     ctx.stroke();
    //     ctx.closePath();
    //     ctx.restore();
    //   }
    //   //开始绘制圆
    //   function drawCircleArc(x, y, r, color = "#409eff") {
    //     ctx.save();
    //     ctx.beginPath();
    //     ctx.fillStyle = color;
    //     ctx.arc(x + r, y + r, r, 0, 2 * Math.PI);
    //     ctx.fill();
    //     ctx.closePath();
    //     ctx.restore();
    //   }
    //   //开始绘制椭圆线
    //   function drawellipse(x, y, axisx, axisy) {
    //     ctx.save();
    //     ctx.beginPath(); //开始绘制椭圆线
    //     ctx.lineWidth = 2; // 可以设置椭圆线的宽度
    //     ctx.ellipse(x, y, axisx, axisy, 0, 0, 2 * Math.PI);
    //     ctx.strokeStyle = "#409eff"; //设置椭圆线的颜色
    //     ctx.stroke();
    //     ctx.closePath();
    //     ctx.restore();
    //   }

    //   // 计算拖拽
    //   function getMousedownOffet(e) {
    //     return {
    //       x: e.offsetX, //- canvas.getBoundingClientRect().left,
    //       y: e.offsetY, //- canvas.getBoundingClientRect().top,
    //     };
    //   }

    //   function getDistance(p1, p2) {
    //     return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
    //   }

    //   function aboveIn(position) {
    //     for (let i = 0; i < element.length; i++) {
    //       if (getDistance(position, element[i]) <= element[i].r) {
    //         return element[i];
    //       }
    //     }
    //     return false;
    //   }

    //   // 动画
    //   var percent = 0;
    //   var _this = this;
    //   ctx.lineWidth = 5;
    //   ctx.strokeStyle = "#409eff";
    //   function animate() {
    //     ctx.clearRect(0, 0, 800, 800);
    //     ctx.beginPath();

    //     _this.drawCurvePath(ctx, [400, 600], [0, 600], 1, percent, [250, 20]);

    //     ctx.stroke();

    //     percent = (percent + 1) % 100;

    //     drawellipse(400, 600, 20, 15);
    //     drawArc(400, 600, 7.5);

    //     requestAnimationFrame(animate);
    //   }

    //   // animate();
    // },
    // /**
    //  * 绘制一条曲线路径
    //  * @param  {Object} ctx canvas渲染上下文
    //  * @param  {Array<number>} start 起点
    //  * @param  {Array<number>} end 终点
    //  * @param  {number} curveness 曲度(0-1)
    //  * @param  {number} percent 绘制百分比(0-100)
    //  */
    // drawCurvePath(ctx, start, end, curveness, percent, cu) {
    //   var cp = [
    //     (start[0] + end[0]) / 2 - (start[1] - end[1]) * curveness,
    //     (start[1] + end[1]) / 2 - (end[0] - start[0]) * curveness,
    //   ];

    //   ctx.moveTo(start[0], start[1]);

    //   for (var t = 0; t <= percent / 100; t += 0.01) {
    //     var x = quadraticBezier(start[0], cu[0], end[0], t);
    //     var y = quadraticBezier(start[1], cu[1], end[1], t);

    //     ctx.lineTo(x, y);
    //   }

    //   function quadraticBezier(p0, p1, p2, t) {
    //     var k = 1 - t;
    //     return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2; // 这个方程就是二次贝赛尔曲线方程
    //   }
    // },
    // async getTabledata() {
    //   let _this = this;
    //   let data = await this.$loadData.methods.getData(this.config, _this);
    //   this[this.config.data.key] = data;
    // },
  },
};
</script>

<style lang="scss" scoped>
.canvas-container {
  width: 100%;
  height: 100%;
  border: 1px solid #409eff;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.canvas-content {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  overflow: hidden;
}
.button-content {
  width: 100%;
  height: 36px;
  background: #409eff;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .canvas-button {
    height: 100%;
    padding: 0px 16px;
    display: flex;
    align-items: center;
    justify-content: center;

    .button-icon {
      color: #fff;
    }

    &:hover {
      background: rgba(0,0,0,0.1);
    }
  }
}
</style>